<template>
  <div class="information flex flex-jc-sp" v-if="newsList.length">
    <div class="flex flex-fd-c left">
      <img class="img mb-28" :src="newsList[0].thumb" alt="" srcset="" />
      <p class="mb-18 color-333" style="font-size: 20px">
        {{ newsList[0].title }}
      </p>
      <p class="color-888">{{ newsList[0].description }}</p>
    </div>
    <div class="right">
      <div
        v-for="item in newsList"
        :key="item.id"
        class="news-item flex flex-jc-sp cursor-p"
        @click="go(item.id)"
      >
        <div class="date">
          <div class="month">{{ item.update_time | getMonthDate }}</div>
          <div class="year">{{ item.update_time | getYear }}</div>
        </div>
        <div style="width: 420px">
          <h3 class="title">{{ item.title }}</h3>
          <p class="describe">{{ item.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    newsList: {
      type: Array,
      default: () => [
        {
          id: 1,
          title: '中国111多地新冠病例散发 双节将至如何防传染？1',
          tag: '写字楼,商铺',
          description: '楼盘超级大降价',
          article_cate_id: 1,
          thumb:
            'http://web.zufang.com\\uploads\\admin\\article_thumb\\20201230\\4ece36c062d0c895e8680e9b0152103d.png',
          content:
            '<p style="margin-top: 15px; margin-bottom: 15px; padding: 0px; color: rgb(51, 51, 51); lett>',
          admin_id: 1,
          create_time: 1609309223,
          update_time: '2020-12-30 14:20:23',
          edit_admin_id: 1,
          status: 0,
          is_top: 1,
          pv: null,
          article_cate_name: '就这租头条',
        },
      ],
    },
  },
  filters: {
    getYear: function (value) {
      const date = new Date(value)
      return date.getFullYear()
    },
    getMonthDate: function (value) {
      const date = new Date(value)
      return (
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        '.' +
        date.getDate()
      )
    },
  },
  methods: {
    go(id) {
      this.$router.push(`/news/detail/${id}`)
    },
  },
}
</script>

<style lang="less" scoped>
.information {
  margin-bottom: 120px;
  .mb-28 {
    margin-bottom: 28px;
  }
  .mb-18 {
    margin-bottom: 18px;
  }
  .fs-20 {
    font-size: 20px;
  }
  .left {
    width: 664px;
    .img {
      width: 664px;
      height: 280px;
      border-radius: 6px;
    }
  }
  .right {
    width: 500px;
    .news-item {
      margin-bottom: 14px;
      .date {
        width: 68px;
        height: 68px;
        background-color: #f9f9f9;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .month {
          font-size: 16px;
          color: #b1b1b1;
          font-weight: bold;
        }
        .year {
          font-size: 18px;
          color: #cecece;
        }
      }
      .title {
        font-size: 18px;
        color: #333;
        margin-bottom: 14px;
        font-weight: 400;
      }
      .describe {
        color: #888;
      }
    }
  }
}
</style>